/* eslint-disable jsx-a11y/anchor-is-valid */
import React, { useState } from 'react'
import styles from './index.module.scss'
import img1 from '@/assets/Home/Group_626147.png'
import img2 from '@/assets/Home/Rectangle_4453.png'
import person1 from '@/assets/Home/person/person1.png'
import person2 from '@/assets/Home/person/person2.png'
import person3 from '@/assets/Home/person/person3.png'
import person4 from '@/assets/Home/person/person4.png'
import person5 from '@/assets/Home/person/person5.png'
import person6 from '@/assets/Home/person/person6.png'
import person7 from '@/assets/Home/person/person7.png'
import person8 from '@/assets/Home/person/person8.png'
import warning4 from '@/assets/Home/warning4.png'
import person1error from '@/assets/Home/Group_626134.png'
import personWarning from '@/assets/Home/personWarning.png'
import warning2 from '@/assets/Home/Group_6261341.png'
import warning3 from '@/assets/Home/Group_6261342.png'
import temp from '@/assets/Home/temp.png'
import user from '@/assets/Home/user.png'
import redPoint from '@/assets/Home/redPoint.svg'
import yellowPoint from '@/assets/Home/yellowPoint.svg'
import garyPoint from '@/assets/Home/grayPoint.svg'
import card1 from '@/assets/Home/card3.png'
import cardPerson1 from '@/assets/Home/cardPerson1.png'
import card2 from '@/assets/Home/card4.png'
import cardPerson2 from '@/assets/Home/cardPerson2.png'
import Down from '@/assets/Home/Down.png'
import { useNavigate } from 'react-router-dom'



const Floor = () => {
  const [isWarning, setIsWarning] = useState(false)
  const [isWarning2, setIsWarning2] = useState(false)
  const [isWarning3, setIsWarning3] = useState(false)

  const navigate = useNavigate()
  const clickButton = (route) => {
    navigate(route)
  }

  return (
    <div className='main'>
      <div className='container'>
        <div className={styles.img2}>
          <img src={img2} alt="" />
        </div>
        <div className={styles.img1}>
          <img src={img1} alt="" />
        </div>
        <div className={styles.person1}>
          <img src={person1} alt="" />
        </div>
        <div className={styles.person2}>
          <img src={person2} alt="" />
        </div>
        <div className={styles.person3}>
          <img src={person3} alt="" />
        </div>
        <div className={styles.person4}>
          <img src={person4} alt="" />
        </div>
        <div className={styles.person5}>
          <img src={person5} alt=""
            onMouseEnter={() => setIsWarning2(true)}
            onMouseLeave={() => setIsWarning2(false)}
          />
        </div>
        <div className={styles.person6}>
          <img src={person6} alt="" />
        </div>
        <div className={styles.person7}>
          <img src={person7} alt=""
            onMouseEnter={() => setIsWarning3(true)}
            onMouseLeave={() => setIsWarning3(false)}
          />
        </div>
        <div className={styles.person8}>
          <img src={person8} alt="" />
        </div>

        <div className={styles.warningSign}>
          <img src={personWarning} alt=""
            onMouseEnter={() => setIsWarning(true)}
            onMouseLeave={() => setIsWarning(false)}
          />
        </div>
        <div className={styles.warningInfo}>
          {
            isWarning && <img src={person1error} alt="" />
          }
        </div>

        <div className={styles.warning2}>
          {
            isWarning2 && <img src={warning2} alt="" />
          }
        </div>

        <div className={styles.warning3}>
          {
            isWarning3 && <img src={warning3} alt="" />
          }
        </div>

        <div className={styles.warning4}>
          <img src={warning4} alt=""
          />
          <span style={{
            marginLeft: 12,
          }}>
            老人情况异常
          </span>
        </div>

      </div>

      <div>
        <div className={styles.selectBox} id='selectBox'>
          <select className={styles.select}
            style={{
              backgroundImage: `url(${Down})`,
              backgroundPosition: "right 16px center"
            }}
          >
            <option>南三楼</option>
            <option>南四楼</option>
            <option>南五楼</option>
            <option>南六楼</option>
          </select>
        </div>

        <div className={styles.selectButton}>
          <div className={styles.button1}
            onClick={() => clickButton('/floor')}
          >
            <span>
              实时人员监控
            </span>
          </div>
          <div className={styles.button2}
            onClick={() => clickButton('/floor2')}
          >
            <span>
              今日工作情况
            </span>
          </div>
        </div>

        <div className={styles.centerCard}>
          <div className={styles.centerBox}
            style={{
              marginRight: 13
            }}
          >
            <div className={styles.centerBoxContent}>
              <img src={temp} alt="" className={styles.centerBoxContentImg} />
              <div className={styles.centerBoxContentUp}>
                室内
                <span className={styles.centerBoxContentTemp}>
                  13°
                </span>
              </div>
              <div className={styles.centerBoxContentDown}>
                室外
                <span className={styles.centerBoxContentTemp}>
                  12°
                </span>

              </div>
            </div>

          </div>
          <div className={styles.centerBox}
            style={{
              marginRight: 13
            }}
          >
            <div className={styles.centerBoxContent}>
              <img src={user} alt="" className={styles.centerBoxContentImg2} />
              <div className={styles.centerBoxContentUp}>
                老人
                <span className={styles.centerBoxContentTemp}
                  style={{
                    marginLeft: 5
                  }}
                >
                  18人
                </span>
              </div>
              <div className={styles.centerBoxContentDown}>
                员工
                <span className={styles.centerBoxContentTemp}
                  style={{
                    marginLeft: 15
                  }}
                >
                  4人
                </span>

              </div>
            </div>

          </div>
        </div>
      </div>

      <div className={styles.right}>
        <div className={styles.rightTitle}>
          本楼层人员状态
        </div>
        <div className={styles.rightCard}>
          <div className={styles.rightCardTitle}>
            员工负荷
          </div>
          <div className={styles.rightCardSubTitle}>
            平均步数
          </div>
          <img src={cardPerson1} alt="" className={styles.rightCardPerson} />
          <img src={card1} alt="" className={styles.rightCardImg} />
          <div className={styles.centerCardLine}>
            ↑1.2%
            <span style={{
              marginLeft: 5,
              color: 'rgba(255, 255, 255, 0.6)'
            }}>
              较昨日
            </span>
            <a href="#"
              style={{
                marginLeft: 47,
                textDecoration: 'none',
                color: 'rgba(255, 255, 255, 0.6)'
              }}
            >{'>'}</a>
          </div>

          {/* 
          
 */}
        </div>
        <div className={styles.rightCard2}>
          <div className={styles.rightCardTitle}>
            老人活力值
          </div>
          <div className={styles.rightCardSubTitle}>
            房间外活动时间
          </div>
          <img src={cardPerson2} alt="" className={styles.rightCardPerson} />
          <img src={card2} alt="" className={styles.rightCardImg} />
          <div className={styles.centerCardLine}>
            ↑2.5%
            <span style={{
              marginLeft: 5,
              color: 'rgba(255, 255, 255, 0.6)'
            }}>
              较昨日
            </span>
            <a href="#"
              style={{
                marginLeft: 47,
                textDecoration: 'none',
                color: 'rgba(255, 255, 255, 0.6)'
              }}
            >{'>'}</a>
          </div>
        </div>
        <div className={styles.rightTitle2}>
          告警信息
        </div>
        <div className={styles.rightBottomBox1}>
          <div className={styles.rightBottomBox1Title}>
            正在告警
            <span className={styles.rightBottomBox1Text1}>
              <img src={redPoint} alt=""
                style={{
                  marginRight: 9,
                  marginBottom: 2
                }}
              />
              <span>紧急</span>
            </span>
            <span className={styles.rightBottomBox1Text2}>
              <img src={yellowPoint} alt=""
                style={{
                  marginRight: 9,
                  marginBottom: 2
                }}
              />
              <span>提示</span>
            </span>
          </div>
          <div className={styles.rightBottomBox1Line1}>
            <span>
              <img src={redPoint} alt=""
                style={{
                  marginRight: 22,
                  marginBottom: 2
                }}
              />
            </span>
            <span>
              如厕过久
            </span>
            <span className={styles.rightBottomBox1Line1Text1}>
              {'>'}40分钟
            </span>
            <span className={styles.rightBottomBox1Line1Text2}>
              陈爷爷
            </span>
            <span className={styles.rightBottomBox1Line1Text2}
              style={{
                marginLeft: 11
              }}>
              南309
            </span>
            <span className={styles.rightBottomBox1Line1Text3}>
              16:35
            </span>
          </div>
        </div>

        <div className={styles.rightBottomBox2}>
          <div className={styles.rightBottomBox2Title}>
            告警历史
          </div>
          <div className={styles.rightBottomBox2Line1}>
            <span>
              <img src={garyPoint} alt=""
                style={{
                  marginRight: 22,
                  marginBottom: 2
                }}
              />
            </span>
            <span>
              夜间离房
            </span>
            <span className={styles.rightBottomBox1Line1Text1}
              style={{
                marginLeft: 21
              }}
            >
              ------
            </span>
            <span className={styles.rightBottomBox1Line1Text4}
              style={{
                marginLeft: 23
              }}
            >
              张爷爷
            </span>
            <span className={styles.rightBottomBox1Line1Text4}
              style={{
                marginLeft: 11
              }}
            >
              南302
            </span>
            <span className={styles.rightBottomBox1Line1Text3}>
              03:17
            </span>
          </div>
          <div className={styles.rightBottomBox2Line2}>
            <span>
              <img src={garyPoint} alt=""
                style={{
                  marginRight: 22,
                  marginBottom: 2
                }}
              />
            </span>
            <span>
              夜间离房
            </span>
            <span className={styles.rightBottomBox1Line1Text1}
              style={{
                marginLeft: 21
              }}
            >
              ------
            </span>
            <span className={styles.rightBottomBox1Line1Text4}
              style={{
                marginLeft: 23
              }}
            >
              杨奶奶
            </span>
            <span className={styles.rightBottomBox1Line1Text4}
              style={{
                marginLeft: 11
              }}
            >
              南305
            </span>
            <span className={styles.rightBottomBox1Line1Text3}>
              02:05
            </span>
          </div>
        </div>
      </div>

    </div>
  )
}

export default Floor